<template>
  <a-config-provider :locale="zh_CN">
    <div class="defaultLayout">
      <flex-header/>
      <flex-tool/>
      <flex-small/>
      <flex-content/>
    </div>
  </a-config-provider>
</template>

<script>
import FlexHeader from '@/components/Header.vue'
import FlexTool from '@/components/ToolsBar.vue'
import FlexContent from '@/components/Content.vue'
import FlexSmall from '@/components/smallTool.vue'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { mapMutations,mapState} from 'vuex'
import account from '~/api/account'

moment.locale('zh-cn')

export default {
  components: {
    FlexHeader,
    FlexTool,
    FlexContent,
    FlexSmall
  },

  data() {
    return {
      zh_CN,
      msg_data: [],
    }
  },
  created() {
    let account = JSON.parse(localStorage.getItem('account'))
    if(account !== null && account !== undefined) {
      this.setAccount(account)
      this.setSignIn(true);
      this.initWebSocket();
    }
  },
  computed:{
      ...mapState({
        account:state=> state.account.account
      })
  },
  destroyed :function() {
  this.websocketclose();
  },
  methods:{
    ...mapMutations({
      setSignIn:'account/setSignIn',
      setAccount:'account/setAccount',
      needUpdate:'needUpdate'
    }),
    
      initWebSocket: function () {
        this.websock = new WebSocket("ws://192.168.31.68:80/websocket");
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
        
      },
      websocketonopen: function () {
        console.log("WebSocket连接成功");
        this.send()
      },
      websocketonerror: function (e) {
        this.$router.push("/mainPage/error")
        console.log("WebSocket连接发生错误");
      },
      websocketonmessage: function (e) {
        var da = e.data;
        this.openNotification('OK','有来自'+da+'的新消息','快查看一下吧!')
        this.needUpdate()
        console.log(da);
        this.msg_data.unshift(da);
      },
      websocketclose: function (e) {
        console.log("connection closed ");
      },
      send: function () {
        console.log(this.websock)
        this.websock.send(this.account.username)
      },
      openNotification(type,title,msg) {
      let iconType = ''
      let iconColor = ''
      if(type=='OK'){
        iconType = 'smile'
        iconColor = '#52c41a'
      }
      else
      {
        iconType = 'frown'
        iconColor = '#eb2f96'
      }
      this.$notification.open({
        message: title,
        description: msg,
        icon: h => h('a-icon', {
          props: {
            type: iconType,
            theme: 'twoTone',
            'two-tone-color': iconColor
          }
        }),
       
      });
    }

  }
}
</script>


<style>
html {
  font-family:
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
.defaultLayout{
  display:block;
  width:100%;
  height:100%;
}
</style>
